<template>
    <!-- 使用 :open 和 @update:open 来替代 v-model -->
    <a-modal :open="open" title="添加学生违纪" @ok="handleOk" @cancel="closeModal" :destroyOnClose="true" :closable="false"
      :maskClosable="false" okText="确认" cancelText="取消">
      
      <a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
        
        <a-form-item label="学号" name="studentId" :rules="rules.studentId">
          <a-input v-model:value="formState.studentId" />
        </a-form-item>
  
        <a-form-item label="活动名称" name="activityName" :rules="rules.activityName">
          <a-input v-model:value="formState.activityName" />
        </a-form-item>
  
        <a-form-item label="活动类型" name="activityType" :rules="rules.activityType">
          <a-input v-model:value="formState.activityType" />
        </a-form-item>
  
        <a-form-item label="活动开始时间" name="activityStartDate" :rules="rules.activityStartDate">
          <a-date-picker v-model:value="formState.activityStartDate" format="YYYY-MM-DD HH:mm:ss" show-time />
        </a-form-item>
        
        <a-form-item label="活动结束时间" name="activityEndDate" :rules="rules.activityEndDate">
          <a-date-picker v-model:value="formState.activityEndDate" format="YYYY-MM-DD HH:mm:ss" show-time />
        </a-form-item>
  
        <a-form-item label="活动描述" name="activityDescription" :rules="rules.activityDescription">
          <a-input v-model:value="formState.activityDescription" />
        </a-form-item>
  
        <a-form-item label="活动分数" name="activityScore" :rules="rules.activityScore">
          <a-input-number v-model:value="formState.activityScore" :min="0" :max="99" />
        </a-form-item>
  
      </a-form>
    </a-modal>
  </template>
  <script setup>
  import { reactive, ref, watch, nextTick } from 'vue';
  import { addSocialPractice } from '@/api/socialPracticeApi';
  import { notification } from 'ant-design-vue';
  
  // 接收父组件传递的 props
  const props = defineProps({
    open: Boolean, // 接收 open 状态
  });
  
  // 触发事件传递给父组件
  const emit = defineEmits(['update:open', 'add']);
  
  const formRef = ref();
  const formState = reactive({
    studentId: '',
    activityName: '',
    activityType: '',
    activityStartDate: null,
    activityEndDate: null,
    activityDescription: '',
    activityScore: null,
  });
  
  // 验证规则
  const rules = {
    studentId: [{ required: true, message: '学号为必填项，必须是12位数字！' }],
    activityName: [{ required: true, message: '活动名称为必填项！' }],
    activityType: [{ required: true, message: '活动类型为必填项！' }],
    activityStartDate: [{ required: true, message: '活动开始时间为必填项！' }],
    activityEndDate: [{ required: true, message: '活动结束时间为必填项！' }],
    activityDescription: [{ required: false, message: '活动描述可以为空！' }],
    activityScore: [
      { required: true, message: '活动分数为必填项！' },
      { type: 'number', min: 0, max: 99, message: '活动分数必须在0到99之间！' }
    ],
  };
  
  const handleOk = async () => {
    try {
      const values = await formRef.value.validateFields(); // 验证表单
      Object.assign(formState, values); // 更新 formState
  
    //   // 转换日期格式
    //   formState.activityStartDate = moment(formState.activityStartDate).format('YYYY-MM-DD HH:mm:ss');
    //   formState.activityEndDate = moment(formState.activityEndDate).format('YYYY-MM-DD HH:mm:ss');
  
      console.log('Success:', formState);
  
      const res = await addSocialPractice(formState);
      console.log(res);
  
      emit('add'); // 仅在添加成功后触发
      emit('update:open', false); // 关闭模态框
      notification.success({
        message: '添加成功',
        description: '社会实践已成功添加。',
      });
  
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
      // 或者在错误处理部分
      notification.error({
        message: '添加失败',
        description: '社会实践添加失败，请重试。',
      });
    }
  };
  
  // 关闭模态框的事件
  const closeModal = () => {
    emit('update:open', false); // 手动关闭模态框
  };
  
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  };
  
  // 监听 props.open 状态变化
  watch(() => props.open, async (newVal) => {
    if (newVal) {
      await nextTick();
      formRef.value.$el.querySelector('input').focus(); // 假设第一个输入框是要聚焦的元素
    } else {
      formRef.value.resetFields(); // 重置表单内容
    }
  });
  </script>